<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Commodity' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增实物商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>

      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">商品新增</h3>

    </el-card>
    <el-card style="margin-top: 30px">

      <span>基础信息</span>

      <el-form
          :model="addCommodityForm"
          :rules="addCommodityFormRules"
          ref="addCommodityFormRef"
          label-width="150px"
          label-position="right"
          size="small"
          class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="commodityname">
          <el-input v-model="addCommodityForm.commodityname"></el-input>
        </el-form-item>

        <el-form-item label="商品封面" prop="">
          <el-input type="hidden" v-model="addCommodityForm.commoditycover"></el-input>
          <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              name="commoditycover"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="轮播图" prop="">
          <!--          <el-input  v-model="addCommodityForm.commodityrotation" type="password"></el-input>-->

          <el-upload
              class="upload-demo"
              :action="url"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>


        <el-form-item label="商品类别" prop="">
          <!--               // <el-input  v-model="addCommodityForm.commoditytype"></el-input>-->
          <div class="block">
            <el-cascader
                v-model="Type"
                :options="Typeoptions"
                @change="handleChange"></el-cascader>
          </div>
          <el-button size="small" type="primary" @click="showt">显示类别</el-button>
        </el-form-item>

        <!--       <el-form-item label="商品类别" prop="">
                  <el-select v-model="addCommodityForm.commoditytype" multiple placeholder="请选择类别">
                    <el-option :label="item.commoditytypename" :value="item.id" v-for="item in commodityTypeList" :key="item.id"></el-option>
                  </el-select>
                </el-form-item>-->

        <!--

                <el-form-item label="是否可抵用折扣" prop="locked">
                  <el-select v-model="addCommodityForm.commoditydeduct" placeholder="请选择是否锁定账户">
                    <el-option label="否" value="0"></el-option>
                    <el-option label="是" value="1"></el-option>
                  </el-select>
                </el-form-item>
        -->

        <el-form-item label="商品描述" prop="livedescribe">
          <el-input v-model="addCommodityForm.livedescribe"></el-input>
        </el-form-item>

        <el-form-item label="商品价格" prop="commodityprice">
          <el-input v-model="addCommodityForm.commodityprice"></el-input>
        </el-form-item>

        <el-form-item label="商品划线价格" prop="commodityfakeprice">
          <el-input v-model="addCommodityForm.commodityfakeprice"></el-input>
        </el-form-item>

        <el-form-item label="商品销售量" prop="">
          <el-input v-model="addCommodityForm.salecounts"></el-input>
        </el-form-item>


        <el-form-item label="是否可抵用折扣" prop="commoditydeduct">
          <el-radio v-model="addCommodityForm.commoditydeduct" :label="1">是</el-radio>
          <el-radio v-model="addCommodityForm.commoditydeduct" :label="0">否</el-radio>
        </el-form-item>

        <el-form-item label="是否上架" prop="commoditystatus">
          <el-radio v-model="addCommodityForm.commoditystatus" :label="1">是</el-radio>
          <el-radio v-model="addCommodityForm.commoditystatus" :label="0">否</el-radio>
        </el-form-item>

        <el-form-item label="排序号" prop="commodityorder">
          <el-input v-model="addCommodityForm.commodityorder"></el-input>
        </el-form-item>

        <el-form-item label="选择规格" prop="">
          <el-input v-model="addCommodityForm.commoditystandardsid"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addUser">确 定</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>
    </el-card>


  </div>
</template>
<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 4,
      commodityList: [],
      commodityTypeList: [], //所有的商品类别
      total: 9,
      commodityname: "",
      addDialogVisible: false,
      imageUrl: "",
      url: this.$MyUrl.serverUrl + 'commodity/upload',
      addCommodityForm: {
        commodityname: "",
        commoditycover: "",
        commodityrotation: "",
        commoditytype: "",
        livedescribe: "",
        commodityprice: "",
        commodityfakeprice: "",
        salecounts: "",
        commoditydeduct: "",
        commoditystatus: "",
        salestarttime: "",
        commodityorder: "",
        commoditystandardsid: "",
      },
      addCommodityFormRules: {
        commodityname: [
          {required: true, message: "請輸入商品名称", trigger: "blur"},
          {min: 2, max: 16, message: "商品名称必须是2-16个字符", trigger: "blur"}
        ],
        livedescribe: [
          {required: true, message: "請輸入商品描述", trigger: "blur"},
          {min: 1, max: 40, message: "内容长度在1-40個字符之間", trigger: "blur"}
        ],
        commodityprice: [
          {required: true, message: "請輸入商品价格", trigger: "blur"},
        ],
        commodityfakeprice: [
          {required: true, message: "請輸入商品划线价格", trigger: "blur"},
        ],
        // department: [{ required: true, message: '請选择部门', trigger: 'change' }],
        commoditystatus: [{required: true, message: "请选择账号状态", trigger: "blur"}],
        commoditydeduct: [{required: true, message: "请选择账号状态", trigger: "blur"}],
        commodityorder: [
          {required: true, message: "請輸入排序号", trigger: "blur"},
        ]
      },
      Type: [],
      Typeoptions: [{
        value: '-1',
        label: '电子类',
        children: [{
          value: '3',
          label: '耳机',
        }, {
          value: '4',
          label: '平板',
        }]
      }, {
        value: '-2',
        label: '书籍类',
        children: [{
          value: '5',
          label: '西班牙语教材',
        }, {
          value: '6',
          label: '日语教材',
        }]
      }]
    };
  },
  methods: {
    showt(){
      alert(this.Type);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.addCommodityForm.commoditycover = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    removeUserById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

          }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },


    addUser() {
      this.$refs.addUserFormRef.validate(valid => {
        if (!valid) {
          return;
        }

      })

    },
    addUserFormClose() {
      this.$refs.addUserFormRef.resetFields();
      this.userRoleList = [];
      this.addUserForm.deptId = "";
      this.addUserForm.roleIds = "";
      this.addDialogVisible = false;
    },
    getCommodityTypeList() {
      let url = "commodity/tlist";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.commodityTypeList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });

    },
    getRoleList() {
      let url = "role/queryRole";
      this.$axios.get(url).then(res => {
        if (res.data.code == 103) {
          this.roleList = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });

    },

    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getCommodityList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getCommodityList();
    },
    //把用户对象中包含的roleList其中的rolename转换为逗号分隔的字符串
    getRoleNames(arr) {
      if (!arr) return;
      let roleNameArr = new Array();
      for (let i = 0; i < arr.length; i++) {
        roleNameArr.push(arr[i].name);
      }
      return roleNameArr.join(",");
    },

    reloadData() {

      //this.getRoleList();
      // this.getUserList()
    }
  },
  created() {
    this.getCommodityTypeList();

  }
};
</script>
<style lang="less" scoped>


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>